import moment from 'moment'
import Vue from 'vue'
const colorList = [
    "#65f5f3",
    "#277ace",
    "#9D88FF",
    "#F8806C",
    "#D689FF",
    "#FFC64E",
    "#3AED9E",
    "#3DADFE",
]
export function useOption(arr, xAxisData, dataZoom, title = '热处理原始记录表单') {
    let left = 9
    return {
        grid: {
            top: "18%",
            left: (left * arr.length) + '%',
            right: "3%",
            // bottom: "15%",
            // containLabel: true
        },
        legend: {

            x: "right", //可设定图例在左、右、居中
            // y: "center",
            // padding: 10,
            // icon: "rect",
            // itemWidth: 20,
            // itemHeight: 10,
            // itemGap: 10,
            orient: "vertical",
            data: arr.map((item, index) => {
                return {
                    name: item.name,
                    textStyle: {
                        color: colorList[index]
                    }
                }
            }),
        },
        title: {
            text: title,
            left: "center",
            textStyle: {
                color: "#5dcbff",
            },
        },
        backgroundColor: "#1F295F",
        tooltip: {
            trigger: "axis",
            axisPointer: {
                lineStyle: {
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgba(0, 255, 233,0)",
                            },
                            {
                                offset: 0.5,
                                color: "rgba(255, 255, 255,1)",
                            },
                            {
                                offset: 1,
                                color: "rgba(0, 255, 233,0)",
                            },
                        ],
                        global: false,
                    },
                },
            },
        },
        dataZoom: [

            {
                id: 'dataZoomY',
                yAxisIndex: arr.map((item, index) => index),
                type: "inside",
                ...dataZoom,
                textStyle: {
                    color: "#5dcbff",
                },
            },
            {
                id: 'dataZoomX',
                xAxisIndex: 0,
                height: 20,
                start: 0,
                end: 100,
                textStyle: {
                    color: "#5dcbff",
                },
            },
        ],


        xAxis: [
            {
                type: "category",
                axisLine: {
                    show: true,
                    color: "#5dcbff",
                },

                axisLabel: {
                    color: "#5dcbff",
                    width: 100,
                    formatter: (val) => {
                        return moment(val).format("HH:mm:ss");
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ["#315070"],
                        width: 1,
                        type: "solid",
                    },
                },
                boundaryGap: false,
                data: xAxisData, //this.$moment(data.times).format("HH-mm") ,
                // this.$moment(item.value[0]).format("HH:mm:ss")
            },
        ],
        // yAxis: this.yAxis,
        yAxis: useyAxis(arr),
        series: useSeries(arr),
    };
}
function useyAxis(arr) {
    let offset = 0;
    let yAxis = []
    arr.forEach((item, index) => {
        offset = index * 52;
        yAxis.push({
            splitLine: {
                show: true,
                lineStyle: {
                    color: [colorList[index]],
                    width: 1,
                    type: "solid",
                },
            },
            nameTextStyle: {
                padding: [0, 0, 0, -15]
            },
            type: "value",
            name: item.name,
            position: "left",
            offset: offset,
            scale: true,
            axisTick: {
                show: true,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: colorList[index],
                },
            },
            axisLabel: {
                formatter: "{value} ",
            },
        })
    })
    return yAxis
}
function useSeries(arr) {
    let series = []
    arr.forEach((item, index) => {
        series.push({
            name: item.name,
            type: "line",
            // smooth: true,
            showAllSymbol: true,
            symbol: "circle",
            symbolSize: 5,
            yAxisIndex: index,
            // lineStyle: {
            //   normal: {
            //     color: "#277ace",
            //   },
            // },
            // label: {
            //   show: true,
            //   position: "top",
            //   textStyle: {
            //     color: "#277ace",
            //   },
            // },
            label: {
                show: false,
                position: "top",
                textStyle: {
                    color: colorList[index],
                },
            },
            itemStyle: {
                normal: {
                    color: colorList[index],
                    lineStyle: {
                        color: colorList[index],
                        width: 1,
                    },
                    areaStyle: {
                        //color: '#94C9EC'
                        color: new Vue.prototype.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            {
                                offset: 0,
                                color: "rgba(7,44,90,0.3)",
                            },
                            {
                                offset: 1,
                                color: "rgba(0,146,246,0.9)",
                            },
                        ]),
                    },
                },
            },
            markPoint: {
                itemStyle: {
                    normal: {
                        color: "red",
                    },
                },
            },
            data: item.data, //data.values
        })
    })
    return series

}